<template>
  <div>
	  <div class="cho">
		<el-form :inline="true" :model="formInline" class="demo-form-inline">
			<el-form-item prop="month">
				<span class="choosemonth">选择月份查询:</span>
			<el-date-picker
				type="month"
				value-format="MM"
				@change="getSTime"
				placeholder="选择月份"
				v-model="formInline.month"
				style="width: 100%;"
			></el-date-picker>
			</el-form-item>
			<el-form-item>
			<!-- <el-button type="primary" size="small" @click="choose">筛选</el-button> -->
			</el-form-item>
		</el-form>
		</div>
      <div id="persondetailchart" :style="{width: '100%', height: '30vh'}"></div>
  </div>
</template>

<script>
import {get} from '../../utils/axios.tool'
export default {
    data() {
        return {
            formInline: {
				month: ''
			},
			sheetData:{},
			aa:[],
			bb:[]
        }
    },
    methods:{
		getData(){
			this.formInline.month = '01'
			let url = '/usermanage/hr_area_board/'
			this.$axios.get(url,this.formInline).then(res=>{
				this.sheetData = res
				this.sheetData.map(item=>{
					this.aa.push(item.area)
					this.bb.push(item.count)
				})
				this.initEcharts()
			})
		},
		getSTime(val){
			this.formInline.month = val
			this.choose()
		},
		choose() {
		this.aa = []
		this.bb = []
		let url = "/usermanage/hr_area_board/";
		this.$axios.get(url, this.formInline).then(res => {
			this.sheetData = res
				this.sheetData.map(item=>{
					this.aa.push(item.area)
					this.bb.push(item.count)
				})
			this.initEcharts()
		});
		},
        initEcharts(){
            let persondetailchart = this.$echarts.init(document.getElementById('persondetailchart'))
            // 绘制图表
            persondetailchart.setOption({
				tooltip : {
                        trigger: 'axis'
                    },
                    // legend: {
                        
                    // },
                    color:'#3E8F7E',
                    xAxis : [
                        {   
                            type : 'category',
                            data:this.aa
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'人数',
                            type:'bar',
                            data:this.bb,
                            markPoint : {
                                data : [
                                    {type : 'max', name: '最大值'},
                                    {type : 'min', name: '最小值'}
                                ]
							},
							itemStyle: {        //上方显示数值
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color: '#2BB3D5',
                                            fontSize: 16
                                        }
                                    }
                                }
                            }
                        },
                    ]
            });
        }
    },
    mounted(){
		this.getData()
    }
}
</script>

<style lang="less">
.choosemonth{
	font-size: 17px;
}
</style>